<template>
  <div>
  <pre :class="'hx-scroll ' + lineNumbers">
    <code :class="'language-' + langType" v-html="Prism.highlight(codeText, Prism.languages[langType], langType)"></code>
  </pre>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';

  import Prism from 'prismjs';

  const props = defineProps({
    codeValue: {
      type: String,
      default: '',
    },
    langType: {
      type: String,
      default: 'html',
    },
    isShowLineNumbers: {
      type: Boolean,
      default: false,
    },
  });

  const codeText = ref('');
  const lineNumbers = computed(() => {
    return props.isShowLineNumbers ? 'line-numbers' : '';
  });

  const fetchData = (code: string) => {
    codeText.value = code;
  };
  const highlightAll = () => {
    Prism.highlightAll(); // 切换重新渲染
  };

  // 暴露方法【给父级调用】
  defineExpose({
    fetchData,
    highlightAll,
  });
</script>

<style lang="less" scoped>

</style>
